<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="600"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-form label-width="150px" :model="form" :rules="rules" ref="formRef">
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.isSendSms')" prop="isSendSms">
            <el-radio-group v-model="propertiesForm.isSendSms">
              <el-radio :label="dict.value" :key="dict.label" v-for="dict in YesNoEnum">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="showSmsConfigId">
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.smsConfigId')" prop="smsConfigId">
            <el-select
              style="width: 100%"
              v-model="propertiesForm.smsConfigId"
              :placeholder="t('system.notifyConfig.properties.placeholder.smsConfigId')"
              clearable
            >
              <el-option v-for="sms in smss" :key="sms.id" :label="sms.name" :value="sms.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="showSmsTemplateId">
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.smsTemplateId')" prop="smsTemplateId">
            <el-input v-model="propertiesForm.smsTemplateId" :placeholder="t('system.notifyConfig.properties.placeholder.smsTemplateId')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="showSmsContent">
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.smsContent')" prop="showSmsContent">
            <el-input type="textarea" rows="6" v-model="propertiesForm.smsContent" :placeholder="t('system.notifyConfig.properties.placeholder.smsContent')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.isSendPush')" prop="isSendPush">
            <el-radio-group v-model="propertiesForm.isSendPush">
              <el-radio :label="dict.value" :key="dict.label" v-for="dict in YesNoEnum">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="showPushWechatTemplateId">
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.pushWechatTemplateId')" prop="wechatTemplateId">
            <el-input v-model="propertiesForm.pushWechatTemplateId" :placeholder="t('system.notifyConfig.properties.placeholder.pushWechatTemplateId')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="showPushAppTitle">
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.pushAppTitle')" prop="pushAppTitle">
            <el-input v-model="propertiesForm.pushAppTitle" :placeholder="t('system.notifyConfig.properties.placeholder.pushAppTitle')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="showPushAppContent">
        <el-col :span="22">
          <el-form-item :label="t('system.notifyConfig.properties.pushAppContent')" prop="pushAppContent">
            <el-input type="textarea" rows="6" v-model="propertiesForm.pushAppContent" :placeholder="t('system.notifyConfig.properties.placeholder.pushAppContent')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{t('crud.cancelText')}}</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="state.loading">{{t('crud.confirmText')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import { changeProperties } from '@/api/system/notifyConfig'
import {FormInstance, FormRules} from 'element-plus'
import {useI18n} from 'vue-i18n'
import {ComponentInternalInstance} from 'vue'
import {optionSelect as smsOptionSelect} from '@/api/system/smsConfig';
const { t } = useI18n()

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { YesNoEnum } = toRefs<any>(proxy?.useEnum('yes_no_enum', 'channel_identifier_enum'))

const emits = defineEmits(['success'])

const formRef = ref<FormInstance>()

const state = reactive({
  visible: false,
  loading: false,
  title: t('crud.action.configuration'),
})

const form = ref<any>({
  id: '',
  properties: {},
})

const propertiesForm = ref<any>({
  isSendSms: 'N',
  smsConfigId: '',
  smsContent: '',
  smsTemplateId: '',
  isSendPush: 'N',
  pushWechatTemplateId: '',
  pushAppTitle: '',
  pushAppContent: '',
})

const showSmsConfigId = computed(() => {
  return propertiesForm.value.isSendSms == 'Y'
})

const showSmsTemplateId = computed(() => {
  if(propertiesForm.value.isSendSms == 'Y') {
    if(propertiesForm.value.smsConfigId) {
      let smsConfig = smss.value.filter((item)=> item.id == propertiesForm.value.smsConfigId)[0]
      if(smsConfig.tplType == 'Id') {
        return true
      }
    }
  }
  return false
})

const showSmsContent = computed(() => {
  if(propertiesForm.value.isSendSms == 'Y') {
    if(propertiesForm.value.smsConfigId) {
      let smsConfig = smss.value.filter((item)=> item.id == propertiesForm.value.smsConfigId)[0]
      if(smsConfig.tplType == 'Content') {
        return true
      }
    }
  }
  return false
})

const showPushWechatTemplateId = computed(() => {
  if(propertiesForm.value.isSendPush == 'Y') {
    return true
  }
  return false
})

const showPushAppTitle = computed(() => {
  if(propertiesForm.value.isSendPush == 'Y') {
    return true
  }
  return false
})

const showPushAppContent = computed(() => {
  if(propertiesForm.value.isSendPush == 'Y') {
    return true
  }
  return false
})

// 字典

const smss = ref<any[]>([])

const rules = reactive<FormRules>({
  appId: [{ required: true, message: t('system.pushConfig.wechat.validator.appId'), trigger: 'blur' }],
  appSecret: [{ required: true, message: t('system.pushConfig.wechat.validator.appSecret'), trigger: 'blur' }],
})

const openDialog = (row?: any) => {
  state.visible = true
  form.value = Object.assign({}, row)
  propertiesForm.value = Object.assign({}, row.properties)
}

const handleClose = () => {
  state.visible = false
}
const handleSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      state.loading = true
      let data = Object.assign(form.value, {  properties: propertiesForm.value})
      await changeProperties(data).finally(() => (state.loading = false))
      ElMessage.success(t('operate.tooltip.success'))
      handleClose()
      emits('success', data)
    }
  })
}

const getDict = () => {
  smsOptionSelect({})
    .then((res) => {
      smss.value = res.data
    })
}
getDict()


const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})
</script>
